<template>
  <view class="box" @click="close">
    <view class="date" @click.stop>
      <view class="date-title-flex"><view class="date-title">{{titleName}}</view><view @click="close" class="close"><uv-icon name="close" size="18"></uv-icon></view></view>
      <view class="date-title textC">{{title}}</view>
      <view class="date-tabs" >
        <view class="date-tabs-button" :class="{active:tabsIndex===0}" @click="handleTabs(0)">近1个月</view>
        <view class="date-tabs-button" :class="{active:tabsIndex===1}" @click="handleTabs(1)">近3个月</view>
        <view class="date-tabs-button" :class="{active:tabsIndex===2}" @click="handleTabs(2)">近6个月</view>
      </view>
      <view class="date-tabs">
        <view class="date-tabs-button input" @click.stop="open('start')" :class="{active:startClass}">{{startTime===''?'起始时间':startTime}}</view>
        <uv-line color="rgba(0, 0, 0, .4)" length="10"></uv-line>
        <view class="date-tabs-button input" @click.stop="open('end')" :class="{active:endClass}">{{endTime===''?'终止时间':endTime}}</view>
      </view>
    </view>
    <view @click.stop>
      <uv-datetime-picker ref="startRef" v-model="startValue" mode="date" @change="changeStart" ></uv-datetime-picker>
      <uv-datetime-picker ref="endRef" v-model="endValue" mode="date" @change="changeEnd" ></uv-datetime-picker>
    </view>

    <view class="sure-button-box" @click.stop>
      <button class="white-sure-button" @click.stop="init">重置</button>
      <button class="sure-button" @click.stop="confirmTime">确定</button>
    </view>
  </view>
</template>

<script setup>
import relativeTime from 'dayjs/plugin/relativeTime'

import {ref, getCurrentInstance, toRefs, reactive, watchEffect, watch} from 'vue'
const props = defineProps({
  startTime:{
    type:String,
    default:''
  },
  endTime:{
    type:String,
    default:''
  },
  titleName:{
    type:String,
    default:'订单筛选'
  },
  title:{
    type:String,
    default:'下单时间'
  }
})
let emits = defineEmits(['update:startTime','update:endTime','close','confirm']);
// const emits = defineEmits(['confirm','reset']);
const {proxy} = getCurrentInstance();
const startRef = ref('')
const startTime = ref('')
const startValue = ref(Date.now())
const endRef = ref('')
const endTime = ref('')
const endValue = ref(Date.now())
const tabsIndex = ref(4)
const startClass = ref(false)
const endClass = ref(false)

watchEffect(()=>{
  startTime.value = props.startTime
  endTime.value = props.endTime
})
// 初始化重置
let init = ()=>{
  startTime.value = endTime.value = '';
  tabsIndex.value = 4;
  startValue.value = endValue.value = Date.now();
  startClass.value = endClass.value = false;
}
let open = (e) => {
  tabsIndex.value = 4
  if(e==='start'){
    startRef.value.open();
    startTime.value===''?startTime.value = proxy.dayjs(startValue.value).format('YYYY-MM-DD'):startValue.value = startTime.value;
    startClass.value = true
    return
  }
  endRef.value.open();
  endTime.value===''?endTime.value = proxy.dayjs(endValue.value).format('YYYY-MM-DD'):endValue.value = endTime.value;
  endClass.value = true
}
// 开始时间切换
let changeStart = (e)=>{
  startTime.value =  startValue.value = proxy.dayjs(e.value).format('YYYY-MM-DD');
}
// 终止时间切换
let changeEnd = (e)=>{
  endTime.value =  endValue.value = proxy.dayjs(e.value).format('YYYY-MM-DD');
}
// 关闭
let close = ()=>{
  init();
  emits('close');
}
// 比较日期大小
let compareDate = () => {
  if(startTime.value && endTime.value){
    let date1 = new Date(Date.parse(startTime.value))
    let date2 = new Date(Date.parse(endTime.value))
    return date1 <= date2
  }
}
// 确定
let confirmTime = ()=>{
  if(compareDate()){
    emits('update:startTime',startTime.value)
    emits('update:endTime',endTime.value)
    emits('confirm', startTime.value, endTime.value);
  }else{
    uni.showToast({title: "终止时间不能小于起始时间", icon: 'none'});
  }
}
// 近时间赋值
proxy.dayjs.extend(relativeTime);

let handleTabs = (index)=>{
  startClass.value = endClass.value = true
  endTime.value = proxy.dayjs().format('YYYY-MM-DD');
  tabsIndex.value = index;
  switch (index){
    case 0:
      startTime.value = proxy.dayjs().subtract(1,"month").format('YYYY-MM-DD');
      break;
    case 1:
      startTime.value = proxy.dayjs().subtract(3,"month").format('YYYY-MM-DD');
      break;
    case 2:
      startTime.value = proxy.dayjs().subtract(6,"month").format('YYYY-MM-DD');
      break;
  }
}

</script>

<style lang="scss" scoped>
.box {
  background: none!important;
}
.date {
  @include form-box(0);
  border-radius: 16rpx 16rpx 0 0;
  width: 100vw;
  display: flex;
  flex-direction: column;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding-top: 32rpx;
  padding-bottom: 500rpx;
  &:last-child {
    margin-bottom: 0;
  }
  &-title-flex {
    position: relative;
    & > .close {
      position: absolute;
      right: 10rpx;
      top: 5rpx;
    }
  }
  &-title {
    font-size: var(--uni-font-size-16);
    font-weight: 600;
    text-align: center;

    &.textC {
      text-align: left;
      padding-top: 40rpx;
    }
  }

  &-tabs {
    flex: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin: 30rpx 0;


    &-button {
      flex: 1;
      padding: 20rpx;
      text-align: center;
      font-weight: 600;
      font-size: var(--uni-font-size-14);
      border-radius: 50rpx;
      background-color: var(--uni-bg-color-grey);
      line-height: 1;
      border-style: solid;
      border-color: var(--uni-bg-color-grey);
      border-width:1px;
      &.input {
        color: var(--uni-text-input-color);
      }
      &.active {
        background-color: rgba(55, 117, 246, .2);
        border-color: var(--uni-text-color-blue);
        color: var(--uni-text-color-blue);
      }
    }
  }
}

</style>
